<template>
  <div class="events-trend">
    <div :class="['title', props.flag === 0 ? 'title-l' : '']"></div>
    <div class="main">
      <LineEcharts
          v-if="props.flag === 1"
          :echartsData="alarmTypeTrend"
          :color="['rgba(239, 102, 27, 0.5)', 'rgba(239, 102, 27, 0)']"
          :graphicColor="[
          ['rgba(239, 102, 27, 0.5)', 'rgba(239, 102, 27, 0)']
        ]"
      />
      <div v-else class="main-content"></div>
    </div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import ComRadioTabA from '@/components/tabComp/ComRadioTabA.vue';
import LineEcharts from '@/components/echarts/lineChart.vue';

const props = defineProps({
  flag: {
    type: Number,
    default: 0
  }
})
const currentTab = ref('1');

const tabList = [
  { name: '1', label: '近30天' },
  { name: '2', label: '全部' }
];

const alarmTypeTrend = {
  label: ['6-25', '6-26', '6-27', '6-28', '6-29', '6-30', '7-1', '7-2'],
  data: [
    {
      name: '',
      value: [80, 82, 120, 110, 99, 101, 111, 99],
    }
  ],
};

function changeTime(val: string) {
  currentTab.value = val;
}

defineComponent({ name: 'EventsTrend' });
</script>

<style scoped lang="scss">
.events-trend {
  @apply relative w-full h-full flex flex-col justify-between;

  .title {
    @apply w-full h-[31px] pl-[26px] text-[22px] leading-[26px];
    text-shadow: 1px 3px 2px rgba(0, 0, 0, 0.4);
    font-style: italic;
    font-family: Alibaba PuHuiTi;
    background: url('./assets/title.png') no-repeat center;
  }

  .title-l {
    background: url('./assets/title-l.png') no-repeat center;
  }

  .main {
    @apply w-full h-[361px];

    .main-content {
      @apply w-full h-full;
      background: url('./assets/data-bj.png') no-repeat center;
      background-size: 100% 100%;
    }
  }

  .tab-box {
    @apply absolute right-0 top-0;
  }
}
</style>
